<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>围棋管理系统 API 文档</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background: #f5f7fa;
        }

        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 2rem;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .header h1 {
            font-size: 2rem;
            margin-bottom: 0.5rem;
        }

        .header p {
            opacity: 0.9;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 2rem;
        }

        .search-box {
            background: white;
            padding: 1.5rem;
            border-radius: 8px;
            margin-bottom: 2rem;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .search-box input {
            width: 100%;
            padding: 0.75rem 1rem;
            border: 2px solid #e0e6ed;
            border-radius: 6px;
            font-size: 1rem;
            transition: border-color 0.3s;
        }

        .search-box input:focus {
            outline: none;
            border-color: #667eea;
        }

        .stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
            margin-bottom: 2rem;
        }

        .stat-card {
            background: white;
            padding: 1.5rem;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            text-align: center;
        }

        .stat-card .number {
            font-size: 2.5rem;
            font-weight: bold;
            color: #667eea;
            margin-bottom: 0.5rem;
        }

        .stat-card .label {
            color: #666;
            font-size: 0.9rem;
        }

        .nav-tabs {
            background: white;
            padding: 1rem;
            border-radius: 8px;
            margin-bottom: 2rem;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
        }

        .nav-tab {
            padding: 0.75rem 1.5rem;
            background: #f5f7fa;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 1rem;
            transition: all 0.3s;
            color: #666;
        }

        .nav-tab.active {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }

        .nav-tab:hover {
            background: #e0e6ed;
        }

        .nav-tab.active:hover {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .section {
            background: white;
            border-radius: 8px;
            padding: 2rem;
            margin-bottom: 2rem;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .section h2 {
            color: #667eea;
            margin-bottom: 1.5rem;
            padding-bottom: 0.75rem;
            border-bottom: 2px solid #e0e6ed;
            font-size: 1.5rem;
        }

        .section h3 {
            color: #444;
            margin: 1.5rem 0 1rem;
            font-size: 1.2rem;
        }

        .api-item {
            border: 1px solid #e0e6ed;
            border-radius: 6px;
            margin-bottom: 1rem;
            overflow: hidden;
            transition: all 0.3s;
        }

        .api-item:hover {
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }

        .api-header {
            padding: 1rem 1.5rem;
            background: #f8f9fa;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 1rem;
            transition: background 0.3s;
        }

        .api-header:hover {
            background: #e9ecef;
        }

        .method {
            padding: 0.25rem 0.75rem;
            border-radius: 4px;
            font-weight: bold;
            font-size: 0.85rem;
            min-width: 60px;
            text-align: center;
        }

        .method.get {
            background: #61affe;
            color: white;
        }

        .method.post {
            background: #49cc90;
            color: white;
        }

        .method.put {
            background: #fca130;
            color: white;
        }

        .method.delete {
            background: #f93e3e;
            color: white;
        }

        .path {
            font-family: 'Courier New', monospace;
            color: #333;
            flex: 1;
            font-size: 0.95rem;
        }

        .description {
            color: #666;
            font-size: 0.9rem;
        }

        .auth-badge {
            padding: 0.25rem 0.75rem;
            border-radius: 4px;
            font-size: 0.8rem;
            background: #ff6b6b;
            color: white;
        }

        .auth-badge.no-auth {
            background: #51cf66;
        }

        .api-body {
            padding: 1.5rem;
            display: none;
            border-top: 1px solid #e0e6ed;
        }

        .api-body.active {
            display: block;
        }

        .params-table {
            width: 100%;
            border-collapse: collapse;
            margin: 1rem 0;
        }

        .params-table th,
        .params-table td {
            padding: 0.75rem;
            text-align: left;
            border-bottom: 1px solid #e0e6ed;
        }

        .params-table th {
            background: #f8f9fa;
            font-weight: 600;
            color: #495057;
        }

        .params-table code {
            background: #f1f3f5;
            padding: 0.2rem 0.5rem;
            border-radius: 3px;
            font-size: 0.9rem;
            color: #e83e8c;
        }

        .test-section {
            background: #f8f9fa;
            padding: 1.5rem;
            border-radius: 6px;
            margin-top: 1.5rem;
        }

        .test-section h4 {
            margin-bottom: 1rem;
            color: #495057;
        }

        .form-group {
            margin-bottom: 1rem;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            color: #495057;
            font-weight: 500;
        }

        .form-group input,
        .form-group textarea {
            width: 100%;
            padding: 0.75rem;
            border: 1px solid #ced4da;
            border-radius: 4px;
            font-size: 0.9rem;
            font-family: 'Courier New', monospace;
        }

        .form-group textarea {
            min-height: 120px;
            resize: vertical;
        }

        .btn {
            padding: 0.75rem 1.5rem;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 1rem;
            font-weight: 500;
            transition: all 0.3s;
        }

        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
        }

        .response-section {
            margin-top: 1rem;
        }

        .response-box {
            background: #1e1e1e;
            color: #d4d4d4;
            padding: 1rem;
            border-radius: 4px;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
            white-space: pre-wrap;
            word-wrap: break-word;
            max-height: 400px;
            overflow-y: auto;
        }

        .code-block {
            background: #1e1e1e;
            color: #d4d4d4;
            padding: 1rem;
            border-radius: 4px;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
            overflow-x: auto;
            margin: 1rem 0;
        }

        .badge {
            display: inline-block;
            padding: 0.25rem 0.5rem;
            border-radius: 3px;
            font-size: 0.8rem;
            font-weight: 500;
        }

        .badge-required {
            background: #ff6b6b;
            color: white;
        }

        .badge-optional {
            background: #51cf66;
            color: white;
        }

        .footer {
            text-align: center;
            padding: 2rem;
            color: #666;
            background: white;
            margin-top: 3rem;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .toggle-icon {
            margin-left: auto;
            transition: transform 0.3s;
        }

        .api-item.open .toggle-icon {
            transform: rotate(180deg);
        }

        @media (max-width: 768px) {
            .container {
                padding: 1rem;
            }

            .header {
                padding: 1.5rem;
            }

            .header h1 {
                font-size: 1.5rem;
            }

            .api-header {
                flex-wrap: wrap;
            }

            .stats {
                grid-template-columns: 1fr;
            }
        }

        .hidden {
            display: none !important;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="container">
            <h1>🎯 围棋管理系统 API 文档</h1>
            <p>完整的 RESTful API 接口文档 - 支持在线测试</p>
        </div>
    </div>

    <div class="container">
        <!-- 统计卡片 -->
        <div class="stats">
            <div class="stat-card">
                <div class="number">106</div>
                <div class="label">总接口数</div>
            </div>
            <div class="stat-card">
                <div class="number">52</div>
                <div class="label">管理后台</div>
            </div>
            <div class="stat-card">
                <div class="number">54</div>
                <div class="label">用户端</div>
            </div>
            <div class="stat-card">
                <div class="number">30</div>
                <div class="label">控制器</div>
            </div>
        </div>

        <!-- 搜索框 -->
        <div class="search-box">
            <input type="text" id="searchInput" placeholder="🔍 搜索接口路径、说明..." />
        </div>

        <!-- 导航标签 -->
        <div class="nav-tabs">
            <button class="nav-tab active" data-section="all">全部接口</button>
            <button class="nav-tab" data-section="admin">管理后台 (52)</button>
            <button class="nav-tab" data-section="api">用户端 (54)</button>
        </div>

        <!-- 管理后台接口 -->
        <div class="section" data-category="admin">
            <h2>🔐 管理后台接口 (52个)</h2>

            <h3>1. 登录认证 (2个)</h3>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method post">POST</span>
                    <span class="path">/admin/login</span>
                    <span class="description">管理员登录</span>
                    <span class="auth-badge no-auth">无需认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
                <div class="api-body">
                    <h4>请求参数</h4>
                    <table class="params-table">
                        <thead>
                            <tr>
                                <th>参数名</th>
                                <th>类型</th>
                                <th>必填</th>
                                <th>说明</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><code>username</code></td>
                                <td>string</td>
                                <td><span class="badge badge-required">必填</span></td>
                                <td>用户名</td>
                            </tr>
                            <tr>
                                <td><code>password</code></td>
                                <td>string</td>
                                <td><span class="badge badge-required">必填</span></td>
                                <td>密码</td>
                            </tr>
                        </tbody>
                    </table>
                    <h4>请求示例</h4>
                    <div class="code-block">{"username": "admin", "password": "admin123"}</div>
                    <h4>响应示例</h4>
                    <div class="code-block">{
  "code": 200,
  "message": "登录成功",
  "data": {
    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
    "admin": {
      "id": 1,
      "username": "admin",
      "nickname": "管理员"
    }
  }
}</div>
                    <div class="test-section">
                        <h4>在线测试</h4>
                        <div class="form-group">
                            <label>请求体 (JSON)</label>
                            <textarea class="request-body">{"username": "admin", "password": "admin123"}</textarea>
                        </div>
                        <button class="btn btn-primary" onclick="testApi(this, 'POST', '/admin/login', false)">发送请求</button>
                        <div class="response-section" style="display:none;">
                            <h4>响应结果</h4>
                            <div class="response-box"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method get">GET</span>
                    <span class="path">/admin/info</span>
                    <span class="description">获取管理员信息</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
                <div class="api-body">
                    <h4>请求头</h4>
                    <table class="params-table">
                        <thead>
                            <tr>
                                <th>参数名</th>
                                <th>类型</th>
                                <th>必填</th>
                                <th>说明</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><code>Authorization</code></td>
                                <td>string</td>
                                <td><span class="badge badge-required">必填</span></td>
                                <td>Bearer {token}</td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="test-section">
                        <h4>在线测试</h4>
                        <div class="form-group">
                            <label>Authorization Token</label>
                            <input type="text" class="auth-token" placeholder="请先登录获取token" />
                        </div>
                        <button class="btn btn-primary" onclick="testApi(this, 'GET', '/admin/info', true)">发送请求</button>
                        <div class="response-section" style="display:none;">
                            <h4>响应结果</h4>
                            <div class="response-box"></div>
                        </div>
                    </div>
                </div>
            </div>

            <h3>2. 轮播图管理 (4个)</h3>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method get">GET</span>
                    <span class="path">/admin/banner/index</span>
                    <span class="description">轮播图列表</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
                <div class="api-body">
                    <h4>查询参数</h4>
                    <table class="params-table">
                        <thead>
                            <tr>
                                <th>参数名</th>
                                <th>类型</th>
                                <th>必填</th>
                                <th>说明</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><code>page</code></td>
                                <td>int</td>
                                <td><span class="badge badge-optional">可选</span></td>
                                <td>页码，默认1</td>
                            </tr>
                            <tr>
                                <td><code>page_size</code></td>
                                <td>int</td>
                                <td><span class="badge badge-optional">可选</span></td>
                                <td>每页数量，默认10</td>
                            </tr>
                            <tr>
                                <td><code>keyword</code></td>
                                <td>string</td>
                                <td><span class="badge badge-optional">可选</span></td>
                                <td>搜索关键词</td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="test-section">
                        <h4>在线测试</h4>
                        <div class="form-group">
                            <label>Authorization Token</label>
                            <input type="text" class="auth-token" placeholder="请先登录获取token" />
                        </div>
                        <button class="btn btn-primary" onclick="testApi(this, 'GET', '/admin/banner/index?page=1&page_size=10', true)">发送请求</button>
                        <div class="response-section" style="display:none;">
                            <h4>响应结果</h4>
                            <div class="response-box"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method post">POST</span>
                    <span class="path">/admin/banner/add</span>
                    <span class="description">添加轮播图</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
                <div class="api-body">
                    <h4>请求参数</h4>
                    <table class="params-table">
                        <thead>
                            <tr>
                                <th>参数名</th>
                                <th>类型</th>
                                <th>必填</th>
                                <th>说明</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><code>title</code></td>
                                <td>string</td>
                                <td><span class="badge badge-required">必填</span></td>
                                <td>标题</td>
                            </tr>
                            <tr>
                                <td><code>image</code></td>
                                <td>string</td>
                                <td><span class="badge badge-required">必填</span></td>
                                <td>图片URL</td>
                            </tr>
                            <tr>
                                <td><code>link_url</code></td>
                                <td>string</td>
                                <td><span class="badge badge-optional">可选</span></td>
                                <td>链接地址</td>
                            </tr>
                            <tr>
                                <td><code>sort</code></td>
                                <td>int</td>
                                <td><span class="badge badge-optional">可选</span></td>
                                <td>排序</td>
                            </tr>
                            <tr>
                                <td><code>status</code></td>
                                <td>int</td>
                                <td><span class="badge badge-optional">可选</span></td>
                                <td>状态 1-启用 0-禁用</td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="test-section">
                        <h4>在线测试</h4>
                        <div class="form-group">
                            <label>Authorization Token</label>
                            <input type="text" class="auth-token" placeholder="请先登录获取token" />
                        </div>
                        <div class="form-group">
                            <label>请求体 (JSON)</label>
                            <textarea class="request-body">{"title": "测试轮播图", "image": "https://example.com/banner.jpg", "sort": 1, "status": 1}</textarea>
                        </div>
                        <button class="btn btn-primary" onclick="testApi(this, 'POST', '/admin/banner/add', true)">发送请求</button>
                        <div class="response-section" style="display:none;">
                            <h4>响应结果</h4>
                            <div class="response-box"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method post">POST</span>
                    <span class="path">/admin/banner/edit</span>
                    <span class="description">编辑轮播图</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
                <div class="api-body">
                    <p>参数与添加接口类似，需要额外传入 <code>id</code> 字段</p>
                </div>
            </div>

            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method post">POST</span>
                    <span class="path">/admin/banner/delete</span>
                    <span class="description">删除轮播图</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
                <div class="api-body">
                    <h4>请求参数</h4>
                    <table class="params-table">
                        <thead>
                            <tr>
                                <th>参数名</th>
                                <th>类型</th>
                                <th>必填</th>
                                <th>说明</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><code>id</code></td>
                                <td>int</td>
                                <td><span class="badge badge-required">必填</span></td>
                                <td>轮播图ID</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <h3>3. 教师管理 (4个)</h3>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method get">GET</span>
                    <span class="path">/admin/teacher/index</span>
                    <span class="description">教师列表</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method post">POST</span>
                    <span class="path">/admin/teacher/add</span>
                    <span class="description">添加教师</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method post">POST</span>
                    <span class="path">/admin/teacher/edit</span>
                    <span class="description">编辑教师</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method post">POST</span>
                    <span class="path">/admin/teacher/delete</span>
                    <span class="description">删除教师</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>

            <h3>4. 课程管理 (4个)</h3>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method get">GET</span>
                    <span class="path">/admin/course/index</span>
                    <span class="description">课程列表</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method post">POST</span>
                    <span class="path">/admin/course/add</span>
                    <span class="description">添加课程</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method post">POST</span>
                    <span class="path">/admin/course/edit</span>
                    <span class="description">编辑课程</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method post">POST</span>
                    <span class="path">/admin/course/delete</span>
                    <span class="description">删除课程</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>

            <h3>5. 比赛管理 (4个)</h3>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method get">GET</span>
                    <span class="path">/admin/competition/index</span>
                    <span class="description">比赛列表</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method post">POST</span>
                    <span class="path">/admin/competition/add</span>
                    <span class="description">添加比赛</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method post">POST</span>
                    <span class="path">/admin/competition/edit</span>
                    <span class="description">编辑比赛</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method post">POST</span>
                    <span class="path">/admin/competition/delete</span>
                    <span class="description">删除比赛</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>

            <h3>6. 活动管理 (4个)</h3>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method get">GET</span>
                    <span class="path">/admin/activity/index</span>
                    <span class="description">活动列表</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method post">POST</span>
                    <span class="path">/admin/activity/add</span>
                    <span class="description">添加活动</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method post">POST</span>
                    <span class="path">/admin/activity/edit</span>
                    <span class="description">编辑活动</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method post">POST</span>
                    <span class="path">/admin/activity/delete</span>
                    <span class="description">删除活动</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>

            <h3>7. FAQ管理 (4个)</h3>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method get">GET</span>
                    <span class="path">/admin/faq/index</span>
                    <span class="description">FAQ列表</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method post">POST</span>
                    <span class="path">/admin/faq/add</span>
                    <span class="description">添加FAQ</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method post">POST</span>
                    <span class="path">/admin/faq/edit</span>
                    <span class="description">编辑FAQ</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method post">POST</span>
                    <span class="path">/admin/faq/delete</span>
                    <span class="description">删除FAQ</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>

            <h3>8. 约棋时间段管理 (4个)</h3>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method get">GET</span>
                    <span class="path">/admin/appointment-time/index</span>
                    <span class="description">时间段列表</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method post">POST</span>
                    <span class="path">/admin/appointment-time/add</span>
                    <span class="description">添加时间段</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method post">POST</span>
                    <span class="path">/admin/appointment-time/edit</span>
                    <span class="description">编辑时间段</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method post">POST</span>
                    <span class="path">/admin/appointment-time/delete</span>
                    <span class="description">删除时间段</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>

            <h3>9. 约棋报名管理 (5个)</h3>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method get">GET</span>
                    <span class="path">/admin/appointment/index</span>
                    <span class="description">约棋报名列表</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method post">POST</span>
                    <span class="path">/admin/appointment/update-status</span>
                    <span class="description">更新报名状态</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method post">POST</span>
                    <span class="path">/admin/appointment/batch-check-in</span>
                    <span class="description">批量签到</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method get">GET</span>
                    <span class="path">/admin/appointment/statistics</span>
                    <span class="description">统计数据</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method get">GET</span>
                    <span class="path">/admin/appointment/export</span>
                    <span class="description">导出数据</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>

            <h3>10. 比赛报名管理 (5个)</h3>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method get">GET</span>
                    <span class="path">/admin/competition-registration/index</span>
                    <span class="description">比赛报名列表</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method get">GET</span>
                    <span class="path">/admin/competition-registration/detail</span>
                    <span class="description">报名详情</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method post">POST</span>
                    <span class="path">/admin/competition-registration/update-status</span>
                    <span class="description">更新状态</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method get">GET</span>
                    <span class="path">/admin/competition-registration/statistics</span>
                    <span class="description">统计数据</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method get">GET</span>
                    <span class="path">/admin/competition-registration/export</span>
                    <span class="description">导出数据</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>

            <h3>11. 用户管理 (5个)</h3>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method get">GET</span>
                    <span class="path">/admin/user/index</span>
                    <span class="description">用户列表</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method get">GET</span>
                    <span class="path">/admin/user/detail</span>
                    <span class="description">用户详情</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method post">POST</span>
                    <span class="path">/admin/user/update-status</span>
                    <span class="description">更新用户状态</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method post">POST</span>
                    <span class="path">/admin/user/update-score</span>
                    <span class="description">更新用户积分</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method get">GET</span>
                    <span class="path">/admin/user/statistics</span>
                    <span class="description">用户统计</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>

            <h3>12. 建议管理 (6个)</h3>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method get">GET</span>
                    <span class="path">/admin/suggestion/index</span>
                    <span class="description">建议列表</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method get">GET</span>
                    <span class="path">/admin/suggestion/detail</span>
                    <span class="description">建议详情</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method post">POST</span>
                    <span class="path">/admin/suggestion/reply</span>
                    <span class="description">回复建议</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method post">POST</span>
                    <span class="path">/admin/suggestion/update-status</span>
                    <span class="description">更新状态</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method post">POST</span>
                    <span class="path">/admin/suggestion/delete</span>
                    <span class="description">删除建议</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method get">GET</span>
                    <span class="path">/admin/suggestion/statistics</span>
                    <span class="description">统计数据</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>

            <h3>13. 课程等级管理 (4个)</h3>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method get">GET</span>
                    <span class="path">/admin/course-level/index</span>
                    <span class="description">等级列表</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method post">POST</span>
                    <span class="path">/admin/course-level/add</span>
                    <span class="description">添加等级</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method post">POST</span>
                    <span class="path">/admin/course-level/edit</span>
                    <span class="description">编辑等级</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method post">POST</span>
                    <span class="path">/admin/course-level/delete</span>
                    <span class="description">删除等级</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>

            <h3>14. 订单管理 (3个)</h3>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method get">GET</span>
                    <span class="path">/admin/order/index</span>
                    <span class="description">订单列表</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method get">GET</span>
                    <span class="path">/admin/order/detail</span>
                    <span class="description">订单详情</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method get">GET</span>
                    <span class="path">/admin/order/statistics</span>
                    <span class="description">订单统计</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>

            <h3>15. 文件上传 (1个)</h3>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method post">POST</span>
                    <span class="path">/admin/upload</span>
                    <span class="description">文件上传</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
                <div class="api-body">
                    <h4>请求参数</h4>
                    <table class="params-table">
                        <thead>
                            <tr>
                                <th>参数名</th>
                                <th>类型</th>
                                <th>必填</th>
                                <th>说明</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><code>file</code></td>
                                <td>file</td>
                                <td><span class="badge badge-required">必填</span></td>
                                <td>上传的文件</td>
                            </tr>
                        </tbody>
                    </table>
                    <p>注意：使用 multipart/form-data 格式上传</p>
                </div>
            </div>
        </div>

        <!-- 用户端接口 -->
        <div class="section" data-category="api">
            <h2>👥 用户端接口 (54个)</h2>

            <h3>1. 用户认证 (7个)</h3>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method post">POST</span>
                    <span class="path">/api/auth/register</span>
                    <span class="description">账号注册</span>
                    <span class="auth-badge no-auth">无需认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
                <div class="api-body">
                    <h4>请求参数</h4>
                    <table class="params-table">
                        <thead>
                            <tr>
                                <th>参数名</th>
                                <th>类型</th>
                                <th>必填</th>
                                <th>说明</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><code>phone</code></td>
                                <td>string</td>
                                <td><span class="badge badge-required">必填</span></td>
                                <td>手机号</td>
                            </tr>
                            <tr>
                                <td><code>password</code></td>
                                <td>string</td>
                                <td><span class="badge badge-required">必填</span></td>
                                <td>密码（至少6位）</td>
                            </tr>
                            <tr>
                                <td><code>nickname</code></td>
                                <td>string</td>
                                <td><span class="badge badge-optional">可选</span></td>
                                <td>昵称</td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="test-section">
                        <h4>在线测试</h4>
                        <div class="form-group">
                            <label>请求体 (JSON)</label>
                            <textarea class="request-body">{"phone": "13800138000", "password": "123456", "nickname": "测试用户"}</textarea>
                        </div>
                        <button class="btn btn-primary" onclick="testApi(this, 'POST', '/api/auth/register', false)">发送请求</button>
                        <div class="response-section" style="display:none;">
                            <h4>响应结果</h4>
                            <div class="response-box"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method post">POST</span>
                    <span class="path">/api/auth/login</span>
                    <span class="description">账号登录</span>
                    <span class="auth-badge no-auth">无需认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
                <div class="api-body">
                    <h4>请求参数</h4>
                    <table class="params-table">
                        <thead>
                            <tr>
                                <th>参数名</th>
                                <th>类型</th>
                                <th>必填</th>
                                <th>说明</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><code>phone</code></td>
                                <td>string</td>
                                <td><span class="badge badge-required">必填</span></td>
                                <td>手机号</td>
                            </tr>
                            <tr>
                                <td><code>password</code></td>
                                <td>string</td>
                                <td><span class="badge badge-required">必填</span></td>
                                <td>密码</td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="test-section">
                        <h4>在线测试</h4>
                        <div class="form-group">
                            <label>请求体 (JSON)</label>
                            <textarea class="request-body">{"phone": "13800138000", "password": "123456"}</textarea>
                        </div>
                        <button class="btn btn-primary" onclick="testApi(this, 'POST', '/api/auth/login', false)">发送请求</button>
                        <div class="response-section" style="display:none;">
                            <h4>响应结果</h4>
                            <div class="response-box"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method post">POST</span>
                    <span class="path">/api/auth/wx-login</span>
                    <span class="description">微信小程序登录</span>
                    <span class="auth-badge no-auth">无需认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>

            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method get">GET</span>
                    <span class="path">/api/auth/user-info</span>
                    <span class="description">获取用户信息</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>

            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method post">POST</span>
                    <span class="path">/api/auth/update-info</span>
                    <span class="description">更新用户信息</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>

            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method post">POST</span>
                    <span class="path">/api/auth/bind-phone</span>
                    <span class="description">绑定手机号</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>

            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method post">POST</span>
                    <span class="path">/api/auth/decrypt-phone</span>
                    <span class="description">解密微信手机号</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>

            <h3>2. 首页 (2个)</h3>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method get">GET</span>
                    <span class="path">/api/index</span>
                    <span class="description">首页数据（轮播图+课程+比赛+活动）</span>
                    <span class="auth-badge no-auth">无需认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
                <div class="api-body">
                    <div class="test-section">
                        <h4>在线测试</h4>
                        <button class="btn btn-primary" onclick="testApi(this, 'GET', '/api/index', false)">发送请求</button>
                        <div class="response-section" style="display:none;">
                            <h4>响应结果</h4>
                            <div class="response-box"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method get">GET</span>
                    <span class="path">/api/banner/list</span>
                    <span class="description">轮播图列表</span>
                    <span class="auth-badge no-auth">无需认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>

            <h3>3. 课程 (2个)</h3>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method get">GET</span>
                    <span class="path">/api/course/index</span>
                    <span class="description">课程列表</span>
                    <span class="auth-badge no-auth">无需认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>

            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method get">GET</span>
                    <span class="path">/api/course/detail</span>
                    <span class="description">课程详情</span>
                    <span class="auth-badge no-auth">无需认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>

            <h3>4. 比赛 (2个)</h3>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method get">GET</span>
                    <span class="path">/api/competition/index</span>
                    <span class="description">比赛列表</span>
                    <span class="auth-badge no-auth">无需认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>

            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method get">GET</span>
                    <span class="path">/api/competition/detail</span>
                    <span class="description">比赛详情</span>
                    <span class="auth-badge no-auth">无需认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>

            <h3>5. 活动 (3个)</h3>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method get">GET</span>
                    <span class="path">/api/activity/index</span>
                    <span class="description">活动列表</span>
                    <span class="auth-badge no-auth">无需认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>

            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method get">GET</span>
                    <span class="path">/api/activity/detail</span>
                    <span class="description">活动详情</span>
                    <span class="auth-badge no-auth">无需认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>

            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method get">GET</span>
                    <span class="path">/api/activity/categories</span>
                    <span class="description">活动分类列表</span>
                    <span class="auth-badge no-auth">无需认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>

            <h3>6. FAQ (1个)</h3>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method get">GET</span>
                    <span class="path">/api/faq/index</span>
                    <span class="description">FAQ列表</span>
                    <span class="auth-badge no-auth">无需认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>

            <h3>7. 教师 (2个)</h3>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method get">GET</span>
                    <span class="path">/api/teacher/index</span>
                    <span class="description">教师列表</span>
                    <span class="auth-badge no-auth">无需认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>

            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method get">GET</span>
                    <span class="path">/api/teacher/detail</span>
                    <span class="description">教师详情</span>
                    <span class="auth-badge no-auth">无需认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>

            <h3>8. 课程等级 (1个)</h3>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method get">GET</span>
                    <span class="path">/api/course-level/index</span>
                    <span class="description">课程等级列表</span>
                    <span class="auth-badge no-auth">无需认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>

            <h3>9. 约棋 (6个)</h3>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method get">GET</span>
                    <span class="path">/api/appointment/timeslots</span>
                    <span class="description">约棋时间段列表</span>
                    <span class="auth-badge no-auth">无需认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>

            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method get">GET</span>
                    <span class="path">/api/appointment/recommend</span>
                    <span class="description">推荐约棋时间段</span>
                    <span class="auth-badge no-auth">无需认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>

            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method get">GET</span>
                    <span class="path">/api/appointment/index</span>
                    <span class="description">约棋报名列表</span>
                    <span class="auth-badge no-auth">无需认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>

            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method get">GET</span>
                    <span class="path">/api/appointment/my</span>
                    <span class="description">我的约棋</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>

            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method post">POST</span>
                    <span class="path">/api/appointment/create</span>
                    <span class="description">创建约棋</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>

            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method post">POST</span>
                    <span class="path">/api/appointment/cancel</span>
                    <span class="description">取消约棋</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>

            <h3>10. 比赛报名 (5个)</h3>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method post">POST</span>
                    <span class="path">/api/competition/register</span>
                    <span class="description">比赛报名</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>

            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method get">GET</span>
                    <span class="path">/api/competition/my-registrations</span>
                    <span class="description">我的比赛报名</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>

            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method get">GET</span>
                    <span class="path">/api/competition/check-registrations</span>
                    <span class="description">查询我在某比赛的报名记录</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>

            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method get">GET</span>
                    <span class="path">/api/competition/registration-detail</span>
                    <span class="description">比赛报名详情</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>

            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method post">POST</span>
                    <span class="path">/api/competition/cancel-registration</span>
                    <span class="description">取消比赛报名</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>

            <h3>11. 排行榜 (3个)</h3>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method get">GET</span>
                    <span class="path">/api/ranking/level</span>
                    <span class="description">等级积分排行榜</span>
                    <span class="auth-badge no-auth">无需认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>

            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method get">GET</span>
                    <span class="path">/api/ranking/contribution</span>
                    <span class="description">贡献积分排行榜</span>
                    <span class="auth-badge no-auth">无需认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>

            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method get">GET</span>
                    <span class="path">/api/ranking/winrate</span>
                    <span class="description">胜率排行榜</span>
                    <span class="auth-badge no-auth">无需认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>

            <h3>12. 建议反馈 (2个)</h3>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method post">POST</span>
                    <span class="path">/api/suggestion/submit</span>
                    <span class="description">提交建议</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>

            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method get">GET</span>
                    <span class="path">/api/suggestion/my</span>
                    <span class="description">我的建议列表</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>

            <h3>13. 订单系统 (5个)</h3>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method post">POST</span>
                    <span class="path">/api/order/create</span>
                    <span class="description">创建订单</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>

            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method get">GET</span>
                    <span class="path">/api/order/my</span>
                    <span class="description">我的订单列表</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>

            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method get">GET</span>
                    <span class="path">/api/order/detail</span>
                    <span class="description">订单详情</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>

            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method post">POST</span>
                    <span class="path">/api/order/cancel</span>
                    <span class="description">取消订单</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>

            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method post">POST</span>
                    <span class="path">/api/order/mock-pay</span>
                    <span class="description">模拟支付（开发测试用）</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>

            <h3>14. 我的课程 (3个)</h3>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method get">GET</span>
                    <span class="path">/api/my-course/index</span>
                    <span class="description">我的课程列表</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>

            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method get">GET</span>
                    <span class="path">/api/my-course/check</span>
                    <span class="description">检查是否已购买某课程</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>

            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method get">GET</span>
                    <span class="path">/api/my-course/detail</span>
                    <span class="description">已购买课程详情</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>

            <h3>15. 通知系统 (6个)</h3>
            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method get">GET</span>
                    <span class="path">/api/notification/index</span>
                    <span class="description">通知列表</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>

            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method get">GET</span>
                    <span class="path">/api/notification/detail</span>
                    <span class="description">通知详情</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>

            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method post">POST</span>
                    <span class="path">/api/notification/mark-read</span>
                    <span class="description">标记为已读</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>

            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method post">POST</span>
                    <span class="path">/api/notification/mark-all-read</span>
                    <span class="description">全部标记为已读</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>

            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method get">GET</span>
                    <span class="path">/api/notification/unread-count</span>
                    <span class="description">获取未读数量</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>

            <div class="api-item">
                <div class="api-header" onclick="toggleApi(this)">
                    <span class="method post">POST</span>
                    <span class="path">/api/notification/delete</span>
                    <span class="description">删除通知</span>
                    <span class="auth-badge">需要认证</span>
                    <span class="toggle-icon">▼</span>
                </div>
            </div>
        </div>

        <!-- 页脚 -->
        <div class="footer">
            <p>围棋管理系统 API 文档 v1.0.0</p>
            <p>总计 106 个接口 | 管理后台 52 个 | 用户端 54 个</p>
            <p>技术栈：Go + Gin + GORM + MySQL + JWT</p>
            <p style="margin-top: 1rem; color: #999;">© 2025 All Rights Reserved</p>
        </div>
    </div>

    <script>
        // API 基础 URL（可以修改为实际地址）
        const API_BASE_URL = 'http://localhost:8080';

        // 切换 API 详情
        function toggleApi(header) {
            const item = header.closest('.api-item');
            const body = item.querySelector('.api-body');
            
            item.classList.toggle('open');
            
            if (body.classList.contains('active')) {
                body.classList.remove('active');
            } else {
                body.classList.add('active');
            }
        }

        // 搜索功能
        document.getElementById('searchInput').addEventListener('input', function(e) {
            const keyword = e.target.value.toLowerCase();
            const items = document.querySelectorAll('.api-item');
            
            items.forEach(item => {
                const path = item.querySelector('.path').textContent.toLowerCase();
                const description = item.querySelector('.description').textContent.toLowerCase();
                
                if (path.includes(keyword) || description.includes(keyword)) {
                    item.style.display = '';
                } else {
                    item.style.display = 'none';
                }
            });
        });

        // 标签切换
        document.querySelectorAll('.nav-tab').forEach(tab => {
            tab.addEventListener('click', function() {
                // 更新标签状态
                document.querySelectorAll('.nav-tab').forEach(t => t.classList.remove('active'));
                this.classList.add('active');
                
                const section = this.dataset.section;
                const sections = document.querySelectorAll('.section');
                
                if (section === 'all') {
                    sections.forEach(s => s.style.display = '');
                } else {
                    sections.forEach(s => {
                        if (s.dataset.category === section) {
                            s.style.display = '';
                        } else {
                            s.style.display = 'none';
                        }
                    });
                }
            });
        });

        // 测试API
        async function testApi(btn, method, path, requireAuth) {
            const testSection = btn.closest('.test-section');
            const responseSection = testSection.querySelector('.response-section');
            const responseBox = testSection.querySelector('.response-box');
            
            // 获取请求体（如果有）
            let body = null;
            const requestBodyInput = testSection.querySelector('.request-body');
            if (requestBodyInput && requestBodyInput.value.trim()) {
                try {
                    body = JSON.parse(requestBodyInput.value);
                } catch (e) {
                    responseBox.textContent = 'JSON 格式错误: ' + e.message;
                    responseSection.style.display = 'block';
                    return;
                }
            }
            
            // 构建请求头
            const headers = {
                'Content-Type': 'application/json'
            };
            
            // 如果需要认证，添加 token
            if (requireAuth) {
                const tokenInput = testSection.querySelector('.auth-token');
                const token = tokenInput ? tokenInput.value.trim() : '';
                if (!token) {
                    responseBox.textContent = '错误: 需要提供 Authorization Token';
                    responseSection.style.display = 'block';
                    return;
                }
                headers['Authorization'] = 'Bearer ' + token;
            }
            
            // 构建请求选项
            const options = {
                method: method,
                headers: headers
            };
            
            if (body && method !== 'GET') {
                options.body = JSON.stringify(body);
            }
            
            // 发送请求
            try {
                btn.disabled = true;
                btn.textContent = '请求中...';
                
                const response = await fetch(API_BASE_URL + path, options);
                const data = await response.json();
                
                responseBox.textContent = JSON.stringify(data, null, 2);
                responseSection.style.display = 'block';
                
                // 如果是登录接口且成功，保存 token
                if (path === '/admin/login' && data.code === 200 && data.data.token) {
                    localStorage.setItem('admin_token', data.data.token);
                    alert('登录成功！Token 已保存，可在其他接口中使用');
                } else if (path === '/api/auth/login' && data.code === 200 && data.data.token) {
                    localStorage.setItem('user_token', data.data.token);
                    alert('登录成功！Token 已保存，可在其他接口中使用');
                } else if (path === '/api/auth/register' && data.code === 200 && data.data.token) {
                    localStorage.setItem('user_token', data.data.token);
                    alert('注册成功！Token 已保存，可在其他接口中使用');
                }
            } catch (error) {
                responseBox.textContent = '请求失败: ' + error.message;
                responseSection.style.display = 'block';
            } finally {
                btn.disabled = false;
                btn.textContent = '发送请求';
            }
        }

        // 页面加载完成后自动填充已保存的 token
        window.addEventListener('DOMContentLoaded', function() {
            const adminToken = localStorage.getItem('admin_token');
            const userToken = localStorage.getItem('user_token');
            
            if (adminToken) {
                document.querySelectorAll('[data-category="admin"] .auth-token').forEach(input => {
                    input.value = adminToken;
                    input.placeholder = 'Token 已自动填充';
                });
            }
            
            if (userToken) {
                document.querySelectorAll('[data-category="api"] .auth-token').forEach(input => {
                    input.value = userToken;
                    input.placeholder = 'Token 已自动填充';
                });
            }
        });
    </script>
</body>
</html>